<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 准备好一个容器，承载整个react -->
	<div id="root"></div>

	<!-- react核心库 -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<!-- 支持react操作dom -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<!-- 将jsx转为js -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

	<script type="text/babel">
		// 创建类式组件
		class Weather extends React.Component {
			// 构造器调用一次
			constructor(props){
				super(props)
				//初始化状态
				this.state = {
					isHot: true
				}
				// 解决cut中的this指向问题
				this.cut = this.cut.bind(this)
			}

			// render调用 1+n 次，1是初始化那次，n是更新次数
			render() {
				return (
					<h1 onClick={this.cut}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
				)
			}
			
			cut(){
				// 由于cut是作为onClick的回调。所以不是通过实例调用的，是直接调用
				// 类中的方法默认开启了局部的严格模式，所以cut中的this为undefined

				// 错误写法：this.state.isHot = !this.state.isHot
				// 状态（state）不可直接更改，要通过内置API setState去更改

				// setState更新是一种合并，不是替换
				this.setState({
					isHot: !this.state.isHot
				})
				
			}
		}
		// 渲染组件到页面
		ReactDOM.render(<Weather/>, document.getElementById('root'))
	</script>
</body>

</html>